<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Synchronise a static map with an interactive map">
    <title>Synchronising Two Maps</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
  </head>
  <body>

    <div class="page-header">
        <h1>Synchronising Two Maps</h1>
        <p>Synchronise a static map with an interactive map</p>
    </div>
    <p>This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes.</p>
    <hr/>
    <h3>Movable Map</h3>
    <div id="map"></div>
    <hr/>
    <h3>Static Map</h3>
    <div id="panel"></div>
    <h3>Code</h3>
    <p>
        <code>H.Map</code>&nbsp;instance fires&nbsp;<a target="_blank" rel="nofollow" href="http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map.html#h-map__events-summary">various events</a>&nbsp;which we can listen and control the second map.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>